<template>
  <div>
    <div class="bannerPic" v-for="item in actList" :key="item.id">
      <router-link
        :to="{path:'/'+item.url,query:{activitySource:item.source,startDate:item.startDate,endDate:item.endDate}}"
      >
        <img :src="item.imgUrl.indexOf('http://') == -1 ?imgBaseUrl+item.imgUrl:item.imgUrl" />
        <p class="content">{{item.sourceName}}</p>
        <p class="content" :style="{'padding-top':'0','font-size':'0.3rem'}">{{item.startDate}}-{{item.endDate}}</p>
        <div v-if="getVifTime(item.endDate)">
          <img src="@/assets/images/over.png" class="overPic" />
        </div>
      </router-link>
    </div>

    <div class="noDataWrap" v-if="kong">
      <noData />
      <p class="noDataContent">暂时没有活动~~</p>
    </div>
  </div>
</template>

<script>
// import { List, Tabs, Tab } from 'vant';
import noData from '@/components/noData/nodata';
import { imgBaseUrl } from '@/config/env.js';
export default {
  data() {
    return {
      imgBaseUrl,
      endData: [],
      kong: false,
      pageNum: 1,
      pageSize: 100,
      actList: [],
      isEnd: false
    };
  },
  mounted() {
    this.getActData();
  },
  methods: {
    // v-if绑定的事件
    getVifTime(endTime) {
      if (
        new Date(endTime.replace(/-/g, '/')).getTime() < new Date().getTime()
      ) {
        return true;
      } else {
        return false;
      }
    },

    // 获取数据
    getActData() {
      this.$http
        .post('/activity/list', {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        })
        .then(res => {
          console.log(res);
          if (res.data && res.data.list.length > 0) {
            this.actList = res.data.list;
          } else {
            this.kong = true;
          }
        });
    }
  },
  components: {
    // 'van-list': List,
    // 'van-tabs': Tabs,
    // 'van-tab': Tab,
    noData
  }
};
</script>

<style lang="scss" scoped>
.bannerPic {
  width: 9.47rem;
  height: 5.8rem;
  background-color: #ffffff;
  box-shadow: 0rem -0.01rem 0.09rem 0rem rgba(212, 209, 209, 0.72);
  border-radius: 0.11rem;
  margin: 0.27rem 0.27rem 0.4rem;
  position: relative;
  img {
    height: 4.67rem;
    border-radius: 0.11rem;
  }
  .content {
    // padding: 0.39rem 0 0 0.27rem;
    padding-left: 0.27rem;
    padding-top: 0.17rem;
    font-size: 0.37rem;
    color: #000000;
  }
  .overPic {
    width: 3.59rem;
    height: 3.1rem;
    position: absolute;
    top: 2.1rem;
    right: 0.4rem;
  }
}
.noDataWrap {
  margin-top: 4rem;
}
.noDataContent {
  text-align: center;
  font-size: 0.43rem;
  color: #868688;
}
</style>
